 
<template>
  <div class="sd">
    <div class="content">
      <div class="l">
        <div> 
          <!-- v-if="system.roles.includes('superadmin')" -->
          <lay-button size="sm" type="primary" @click="edit_msg" v-if="system&& system.roles.includes('superadmin')" >{{ editBtn? '完成':'修改填写信息' }}</lay-button>
          <!-- <span>{{ system.roles }}</span> -->
        </div>
        <div>
          <h2 >三点评吸完成情况</h2>
          <lay-table ref="tableRef6" :columns="columns" :data-source="l_smokeList">
            <template v-slot:operator="{ row }">
              <div class="">
                <el-button v-if="title != '查看任务'" style="width: 30px;" link size="small" type="primary" @click="sdPush(row)"><span
                    :style="{color: row.smokeStatus=='1'?'red':'#409eff' }">{{ row.smokeStatus=='1'?'已推送':'推送' }}</span></el-button>
                <el-button link size="small" @click="view(row)">查看</el-button>
              </div>
            </template>
          </lay-table>
        </div>
 
      </div>
      <div class="r df">
        <div>
          <table border v-if="detailList && detailList.length>0">
            <thead>
              <tr>
                <th rowspan="2">卷烟牌号</th>
                <th rowspan="2" colspan="2">黄金叶</th>
                <th rowspan="2">样品</th>
                <th>A</th>
              </tr>
              <tr>
                <th>B</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>编号123</td>
                <td>评吸结论</td>
                <td>结果判定</td>
              </tr>
              <tr v-for="(item, index) in detailList" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.number }}</td>
                <td>
                  <!-- {{ item.conclusion }} -->
                  <!-- <el-input @blur="inp_blue" v-if="editBtn" v-model="item.conclusion" size="small" style="width: 70px;" :data-index="index"></el-input> -->
                  <lay-button v-if="editBtn" size="xs" @click="edit_pad(item,index)">{{ item.conclusion }}</lay-button>
                  <div v-else>{{ item.conclusion }}</div>
                </td>
                <td>{{ item.status ==0?'√' :item.status ==1?'x':'-' }}</td>
              </tr>
              <tr>
                <td rowspan="3">综合评价</td>
                <td colspan="3">评吸人数（N）</td>
                <td>{{detailList[0].smokeNumber}}</td>
              </tr>
              <tr>
                <td colspan="3">混淆人数（N）</td>
                <td>{{detailList[0].confoundNumber}}</td>
              </tr>
              <tr>
                <td colspan="3">同质化率（M/N x 100%）</td>
                <td>{{detailList[0].homogenizationRate}}%</td>
              </tr>
            </tbody>
          </table>
          <div v-else style="text-align: center;">
            点击查看获取详情数据...
          </div>
        </div>
        <div class="df jc-sb">
          <span></span>
          <lay-button size="sm" @click="close">关闭</lay-button>
        </div>
      </div>
    </div>

    <lay-layer v-model="pad_visible" title="请选择" :area="['250px', '150px']">
      <div style="padding: 20px;">
        <lay-button :type="thisRes == '1=2'?'primary':''" @click="edit_pad_enter('1=2')">1=2</lay-button>
        <lay-button :type="thisRes == '1=3'?'primary':''" @click="edit_pad_enter('1=3')">1=3</lay-button>
        <lay-button :type="thisRes == '2=3'?'primary':''" @click="edit_pad_enter('2=3')">2=3</lay-button>
      </div>
    </lay-layer>

  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { layer } from "@layui/layui-vue";
import {useCounterStore} from '@/current'
import {storeToRefs} from 'pinia'   // cnpm i pinia --save  2.1.3  
const store = useCounterStore()
const {system} = storeToRefs(store)  //  数据 




const router = useRouter();
const route = useRoute();
const mettingID = ref(route.query.mettingID);
const id = ref(route.query.id);
const title = ref(route.query.title);

const columns = ref([
  { title: "本次评吸烟支", key: "smokeName" },
  { title: "操作", key: "operator", customSlot: "operator" },
]);

onMounted(() => {
  get_smoke_list();
  console.log(mettingID.value)
  // get_detail_list(id.value)
});

// 推送
const sdPush = async (row) => {
  console.log(row);

  if (row.smokeStatus == "1") {
    return false;
  }

  const res = await http.corsApi("/smokeMeeting/threePointPush", "get", { id: id.value, allowanceId: row.allowanceId });
  console.log(res);
  if (res.data.smokeStatus == "1") {
    layer.msg("推送成功", { icon: 1, time: 2000 });

    await get_smoke_list();
  }
};
// 查看
const view = async (row) => {
  if (row.smokeStatus == "1") {
    await get_detail_list(row.allowanceId);
  } else {
    layer.msg("推送之后才能查看详情", { icon: 2, time: 1500 });
    detailList.value = [];
  }
};

// 修改填写信息
const pad_visible = ref(false);
const editBtn = ref(false);
const edit_msg = () => {
  editBtn.value = !editBtn.value;

  
};
// input失去焦点时间
const inp_blue = async (e) => {
  console.log(e.target.dataset.index);
  console.log(e.target.value);
  let tabIndex = e.target.dataset.index;
  console.log(detailList.value[tabIndex]);
  let data = detailList.value[tabIndex];
  console.log(id.value);

  const res = await http.corsApi("smokeMeeting/threePoint", "put", {
    conclusion: data.conclusion,
    id: data.id,
    number: data.number,
    pointId: data.allId,
    status: data.status,
    userId: data.userId,
  });
  console.log(res);
  if (res.data) {
    layer.msg("修改成功", { icon: 1, time: 1500 });
  }
};
const padItem = ref([]);
const thisRes = ref("");
const edit_pad = (item, index) => {
  console.log(item, index);
  padItem.value = item;
  pad_visible.value = true;
  thisRes.value = item.conclusion;
};
const edit_pad_enter = async (e) => {
  const res = await http.corsApi("smokeMeeting/threePoint", "put", {
    conclusion: e,
    id: padItem.value.id,
    number: padItem.value.number,
    pointId: padItem.value.allId,
    status: padItem.value.status,
    userId: padItem.value.userId,
  });
  console.log(res);
  if (res.data) {
    layer.msg("修改成功", { icon: 1, time: 1500 });
    pad_visible.value = false;
    await get_detail_list(padItem.value.allowanceId);
    // editBtn.value = false; 
  }
};

// 获取推送烟支列表
const l_smokeList = ref<any>([]);
const get_smoke_list = async () => {
  const res = await http.corsApi(`/smokeMeeting/threePointSmoke/${id.value}`, "get", {});
  console.log(res);

  if (res.data.length > 0) {
    l_smokeList.value = res.data;
  }
};

const detailList = ref([]);
const get_detail_list = async (smokeID) => {
  const res = await http.corsApi("/smokeMeeting/threePointDetails", "get", { id: route.query.id, allowanceId: smokeID });
  //   console.log(res);
  console.log(res);
  detailList.value = res.data;
};

const close = () => {
  router.go(-1);
};
</script> 

<style scoped lang="scss">
.sd {
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  box-sizing: border-box;
  .content {
    display: flex;
    width: 100%;
    .l {
      width: 40%;

      > div {
        width: 300px;
        margin-left: 80px;

        h2 {
          text-align: center;
          margin-bottom: 20px;
          margin-top: 20px;
        }
        :deep(.layui-table) {
          .layui-table-cell-content {
            justify-content: center;
          }
          .layui-table-cell {
            text-align: center;
          }
        }
      }
    }
    .r {
      width: 60%;
      > div:nth-child(1) {
        width: 80%;
        margin-top: 65px;
        table {
          border: 1px solid #ccc;
          width: 100%;
          td,
          th {
            text-align: center;
            padding: 4px 0;
          }
        }
      }
      > div:nth-child(2) {
        width: 20%;
      }
    }
  }
}
</style>  